<%--
  Created by IntelliJ IDEA.
  User: hasee
  Date: 2021/11/8
  Time: 19:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Pixiv</title>
    <script src = "../common/jquery3.6.0.js"></script>
    <style type = "text/css">
        *{
            padding:0px;
            margin:0px;
        }
    </style>
</head>
<body>
<img src="/pixiv/RegisterServlet?appType=initRegister"
     style = "background-color:white;width:100%;height:100%;" >
<input type = "button" id = "gotoRegister" value = "注册">
<div id = "loginRegisterBackground">
    <div><p>Pixiv</p><p>用户登录</p></div>

    <input type = "text" id = "User" value = "" placeholder="输入用户名">
    <input type = "password" id = "Password" value = "" placeholder="输入密码">
    <div id = "Tip">登录失败，请检查你的账号名或者密码输入正确</div>
    <input type = "button" id = "LoginButton" value = "登录账号">
    <p></p>
</div>
<div id = "loginBottomCover">

</div>
<script type = "text/javascript">
    setTipHiden();
    var btn = document.querySelector("#LoginButton");
    btn.onclick = function(){
        var user = document.querySelector("#User").value;
        var password = document.querySelector("#Password").value;

        //点击登录按钮后触发ajax
        $.ajax({
            url:"/pixiv/LoginServlet",
            data:{"appType":"SendLoginPacket",User:user,PWD:password},
            dataType:"json",
            type:"post",
            success:function(req){
                if (req.flag == 1) {
                    setTimeout("gotoPixiv()",1500);
                    sendTipVal("登录成功");

                }else if (req.flag == 0) {
                    setTipShow();
                    setTimeout("setTipHiden()", 2000);

                }
            }
        });


    }
    document.querySelector("#gotoRegister").addEventListener("click",gotoRegister );

    function gotoPixiv(){
        $.ajax({
            url:"/pixiv/PixivMainViewServlet",
            data:{"appType":"InitGotoPixiv"},
            dataType:"json",
            type:"post",
            success:function(req)
            {
                if (req.flag == 1)
                    location.href = "index.jsp";
            }
        })
    }
    function gotoRegister(){
        $.ajax({
            url:"/pixiv/RegisterUserServlet",
            data:{"appType":"InitGotoRegister"},
            dataType:"json",
            type:"post",
            success:function(req)
            {
                if (req.flag == 1)
                    location.href = "registerlogin.jsp";
            }
        })
    }

    function sendTipVal(information)
    {
        var Tip = document.querySelector("#Tip");
        Tip.style.display = "block";
        Tip.innerHTML = information;
        setTimeout("setTipHiden()", 2000);
    }
    function setTipHiden(){
        var Tip = document.querySelector("#Tip");
        Tip.style.display = "none";
    }
    function setTipShow(){
        var Tip = document.querySelector("#Tip");
        Tip.style.display = "block";
    }

</script>
<style type = "text/css">
    #loginRegisterBackground{
        position:absolute;
        width:26%;
        height:500px;
        left:37%;
        top:150px;
        background-color:rgba(255,255,255,0.8);
        z-index:5;
        text-align:center;
    }
    #loginRegisterBackground>div:nth-child(1)
    {
        width:100%;
        height:100px;
        text-align:center;
    }
    #User{
        margin-top:3px;
        border-radius:0px;
        border:0px;
        width:80%;
        height:40px;
    }
    #Password{
        margin-top:3px;
        border-radius:0px;
        border:0px;
        width:80%;
        height:40px;
    }
    #LoginButton{
        margin-top:10px;
        position:relative;
        width:80%;
        height:40px;
        border-radius:15px;
        border:0px;
        background-color:rgba(143,147,204,1.0);
        color:rgba(250,250,250,1.0);
        font-size:15px;
    }
    #gotoRegister{
        position:absolute;
        width:10%;
        left:90%;
        height:30px;
        border-radius:15px;
        border:0px;
        background-color:rgba(143,147,204,1.0);
        color:rgba(255,255,255,1.0);
        font-size:15px;
    }
    #gotoRegister:hover{
        background-color:rgba(125,115,173,1.0);
    }
    #Tip{
        font-size:10px;
    }
    #LoginButton:hover{
        background-color:rgba(125,115,173,1.0);
    }
    #loginBottomCover{
        width:100%;
        position:absolute;
        left:0px;
        top:95%;
        height:5%;
        background-color:rgba(0,0,0,0.9);
        z-index:6;
    }
</style>
</body>
</html>
